<template>
  <div class="company-container">
    <h1>欢迎来到志飞科技</h1>
    <p>志飞科技是一家专注于人工智能技术研发与应用的高新技术企业，致力于推动科技创新与产业发展。</p>

    <h2>我们的业务包括：</h2>
    <ul class="business-list">
      <li>人工智能算法研究与开发</li>
      <li>智能硬件产品设计与制造</li>
      <li>大数据分析与应用</li>
      <li>物联网技术应用</li>
    </ul>

    <h2>团队文化</h2>
    <p>我们秉承着开放、创新、合作的团队文化，鼓励员工通过持续学习和实践来提升自己，并为公司的发展做出贡献。</p>
    <p>我们注重团队协作和知识分享，鼓励员工之间相互学习和支持，共同解决问题和取得成就。</p>

    <h2>招聘信息</h2>
    <div class="departments-container">
      <div class="department-card" v-for="dept in departments" :key="dept.id">
        <h3>{{ dept.name }}</h3>
        <p>{{ dept.description }}</p>
        <div class="requirements">
          <h4>招聘要求：</h4>
          <ul>
            <li v-for="req in dept.requirements" :key="req">{{ req }}</li>
          </ul>
        </div>
      </div>
    </div>

    <h2>员工福利</h2>
    <ul class="benefits-list">
      <li>具有竞争力的薪资和福利待遇</li>
      <li>灵活的工作时间和工作地点</li>
      <li>提供持续的职业培训和晋升机会</li>
      <li>丰富多样的员工活动和团建</li>
      <li>完善的社会保险和福利制度</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [
        {
          id: 1,
          name: '研发部门',
          description:
            '研发部门负责产品的研发和技术创新，需要具备扎实的编程能力和良好的团队协作能力。',
          requirements: [
            '精通至少一种编程语言，如Java、Python等',
            '熟悉前端或后端开发技术栈',
            '具备良好的问题解决能力和创新思维'
          ]
        },
        {
          id: 2,
          name: '市场部门',
          description:
            '市场部门负责产品营销推广和市场调研，需要具备良好的沟通能力和市场分析能力。',
          requirements: [
            '熟悉市场营销策略和推广渠道',
            '具备良好的口头和书面表达能力',
            '具备市场数据分析和竞争研究能力'
          ]
        },
        {
          id: 3,
          name: '测试部门',
          description:
            '测试部门负责产品质量和性能测试，需要具备严谨的测试思维和问题排查能力。',
          requirements: [
            '熟悉软件测试方法和工具',
            '具备良好的逻辑思维和问题诊断能力',
            '熟悉自动化测试和性能测试技术者优先'
          ]
        },
        {
          id: 4,
          name: '财务部门',
          description:
            '财务部门负责公司财务管理和资金运作，需要具备扎实的财务知识和分析能力。',
          requirements: [
            '熟悉财务会计准则和税法法规',
            '具备财务报表分析和预算控制能力',
            '具备风险评估和资金运作能力'
          ]
        },
        {
          id: 5,
          name: '运维部门',
          description:
            '运维部门负责系统运维和网络管理，需要具备良好的技术运维能力和故障处理能力。',
          requirements: [
            '熟悉操作系统和网络设备管理',
            '具备良好的故障排除和问题解决能力',
            '熟悉云计算和容器化技术者优先'
          ]
        }
      ]
    };
  }
};
</script>

<style>
.company-container {
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

p {
  font-size: 14px;
  margin-bottom: 15px;
}

.business-list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 15px;
}

.department-card {
  width: 300px;
  margin: 20px;
  padding: 20px;
  background-color: #f1f1f1;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.requirements {
  margin-top: 15px;
}

h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}

li {
  font-size: 14px;
  margin-bottom: 5px;
}

.benefits-list {
  list-style-type: disc;
  margin-left: 20px;
}

/* 添加样式 */
.departments-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.department-card:nth-child(2n) {
  background-color: #e8f5e9;
  border: 1px solid green;
}

.department-card:nth-child(3n) {
  background-color: #e1f5fe;
  border: 1px solid blue;
}

.department-card:nth-child(4n) {
  background-color: #fce4ec;
  border: 1px solid red;
}

.department-card:nth-child(5n) {
  background-color: #fff9c4;
  border: 1px solid yellow;
}
</style>
